<template>    
    <div ref="numbox" class="mui-numbox" data-numbox-min='1' :data-numbox-max='valmax' >
        <button class="mui-btn mui-btn-numbox-minus" type="button" >-</button>
        <input ref="valbox" id="test" class="mui-input-numbox" type="number" :value="selectedVal" @change="onSelChange"/>
        <button class="mui-btn mui-btn-numbox-plus" type="button" >+</button>
    </div>
</template>


<script>
import mui from '../../lib/mui/js/mui.min.js'

export default {
    // 传参
    props: ["valmax"],
    mounted() {
        // 初始化数字选择框
        mui(".mui-numbox").numbox();        
    },
    data() {
        return {
            selectedVal: 1
        }
    },
    methods: {
        onSelChange() {
            
            this.selectedVal = parseInt(this.$refs.valbox.value);                        
            this.$emit('getSelectedCount', this.selectedVal);
        }
    },
    watch: {
        // 因为valmax是从父组件传值，但是父组件获取该值的方式是异步，第一时刻传过来的值时 undefined
        // 通过watch 可以屏蔽该bug，总有一个时刻可以获取到正确的值。
        valmax: function(newVal, oldVal) {
            // console.log(newVal, oldVal);
            // this.$refs.numbox.setOption('max', newVal);
            // 通过js方式配置最大值
            mui(".mui-numbox").numbox().setOption('max', newVal);
        }
    },
    
}
</script>


<style lang="scss" scoped>

</style>
